<template>
  <a-menu v-model:selectedKeys="menuCurrent" mode="horizontal">
    <a-menu-item key="home">
      <router-link to="/home">首页</router-link>
    </a-menu-item>
    <a-menu-item key="signup">
      <router-link to="/signup">我的报名</router-link>
    </a-menu-item>
    <a-menu-item key="user">
      <router-link to="/user">我的信息</router-link>
    </a-menu-item>
  </a-menu>
  <div>
    <a-avatar :size="64">
    <template #icon><UserOutlined /></template>
  </a-avatar>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="javascript:;">1st menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">2nd menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">3rd menu item</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { DownOutlined } from '@ant-design/icons-vue';
export default {
  components:{
    DownOutlined
  },
  setup() {
    const menuCurrent = ref(["home"]);
    return {
      menuCurrent,
    };
  },
};
</script>

<style>
</style>